<template>
  <div class="container">
    <div class="head">
      <el-tag>软件信息表</el-tag>
      <div>
      <el-input
        class="search"
        placeholder="搜索内容"
        suffix-icon="el-icon-search"
        v-model="searchInput"
      ></el-input>
       <el-button  class="add" type="primary" @click="dialogFormVisible = true">添加</el-button>
      </div>
    </div>
    <div class="main">
      <el-table
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        :data="tabledata.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        style="width: 100%"
        height='520'
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="系统ID">
                <span>{{ props.row.SystemId}}</span>
              </el-form-item>
              <el-form-item label="系统名称">
                <span>{{ props.row.Syname}}</span>
              </el-form-item>
              <el-form-item label="版本号">
                <span>{{ props.row.Version}}</span>
              </el-form-item>
              <el-form-item label="发布时间">
                <span>{{ props.row.Time}}</span>
              </el-form-item>
              <el-form-item label="测试地址">
                <span>{{ props.row.Address}}</span>
              </el-form-item>
              <el-form-item label="开发人员ID">
                <span>{{ props.row.develoId}}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="SystemId" label="系统ID"></el-table-column>
        <el-table-column prop="Syname" label="系统名称"></el-table-column>
        <el-table-column prop="Version" label="版本号" ></el-table-column>
        <el-table-column prop="Time" label="发布时间" ></el-table-column>
        <el-table-column prop="Address" label="测试地址" ></el-table-column>
        <el-table-column prop="develoId" label="开发人员" ></el-table-column>
        <el-table-column fixed="right" label="操作" :label-width="formLabelWidth">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleclickdelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :pageSize="pagesize"
        :current-page.sync="currentPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog class="dialog" title="添加反馈信息" :visible.sync="dialogFormVisible" width="35%">
      <el-form :model="form" align="right" ref="form" :rules="rules">
        <el-form-item label="系统ID" prop="SystemId">
          <el-input v-model.number="form.SystemId" placeholder="请输入系统ID"  disable></el-input>
        </el-form-item>
        <el-form-item label="系统名称" prop="Syname">
          <el-input v-model="form.Syname" placeholder="请输入系统名称"></el-input>
        </el-form-item>
        <el-form-item label="版本号" prop="Version">
          <el-input v-model="form.Version" placeholder="请输入系统版本号"></el-input>
        </el-form-item>

        <el-form-item label="开发者人员" prop="develoId">
           <el-select v-model="form.develoId" placeholder="请选择开发者人员ID">
        <el-option
        v-for="item in developerID"
        :key="item"
        :label="item"
        :value="item">
    </el-option>
      </el-select>
        </el-form-item>
     

        <el-form-item label="测试地址" prop="Address">
          <el-input placeholder="请输入测试地址" v-model="form.Address"></el-input>
        </el-form-item>
        <el-form-item label="发布时间" prop="Time">
          <el-date-picker
            v-model="form.Time"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择发布日期"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">添 加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getSystems, postSystems,getTechnologys,removeCustomer} from '../../../api/System'
export default {
  data() {
    return {
      searchInput: "",
      currentPage: 1,
      pagesize: 10,
      total: 0,
      loading: true,  
      dialogFormVisible: false,
      form: {},
      data: [],
      developerID:[],
      rules: {
        SystemId: [{  required:true,  trigger: "blur", message: '请输入系统id号'},{type:'number',message:'Id必须为数字', trigger: "blur"}],
        Syname: [{ required: true, message: "请输入系统名称", trigger: "blur" }],
        Version: [{ required: true, message: "请输入版本号", trigger: "blur" }],
        develoId: [ { required: true, message: "请输入开发人员id", trigger: "blur" }],
        Address: [{ required: true, message: "请输入测试地址", trigger: "blur" }],
        Time: [{ required: true, message: "请输入发布日期", trigger: "blur" }]
      }
    };
  },
  mounted() {
    this.getdata()
    this.getdata1()
  },
  watch: {
    tabledata(val) {
      this.total = val.length;
    }
  },
  computed: {
    tabledata() {
      var search = this.searchInput;
      if (search) {
        return this.data.filter(data =>
          Object.keys(data).some(key =>
            String(data[key])
              .toLowerCase()
              .match(search)
          )
        )
      }
      return this.data;
    }
  },
  methods: {
    async getdata()  {
      try{
        this.loading = true
        let res = await getSystems()
        if(res.data.value.length){
          this.data = res.data.value
          this.loading = false;
         
        } else {
          throw new Error('数据获取失败')
        }
      }catch(err){
         this.loading = false
        console.log(`系统信息表获取失败:${err}`)
      }
    },
    getdata1() {
      let data = async () => {
        try {
          let result = await getTechnologys()

          if (result) {

            for(var i = 0;i<result.length;i++){
              if(result[i].Role=="Developer")
              this.developerID.push(result[i].name)
               console.log(this.developerID)
            }

          }
        } catch (err) {
          console.log(err)
        }
      }
      data()
    },
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    submitForm(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          this.$confirm("是否添加?", "提示", {
            type: "warning"
          })
            .then(async() => {
              try{
                 let res = await postSystems(this.form)
                 this.data.push(res.data)
                 this.form = {}
                 this.$refs[form].clearValidate();
                 this.$message.success("添加成功!");
                 this.dialogFormVisible = false;
                 console.log(res)
              } catch(err) {
                this.$message.error(err);
              }
            })
            .catch(() => { 
              this.$message({
                type: "info",
                message: "已取消添加"
              });
            });
        } else {
          console.log("error");
          return false;
        }
      });
    },
    handleclickdelete (row) {
      this.$confirm('此操作将删此用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let remove = async () => {
          try {
             await removeCustomer(row.SysformId)
          } catch (err) {
            console.log(err)
          }
        } 
        remove()
        let index = this.data.findIndex(item => {
          return item === row
        })
        this.data.splice(index, 1)
        // this.list = this.data
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.dialogFormVisible = false
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
  }
};
</script>

<style lang='sass' scoped >
.container 
  padding: 20px

.head 
  display: flex
  justify-content: space-between
  align-items: center
  .search
    width: 70%


.main 
  .btn-add 
    width: 100%
    margin: 10px 0
    background-color:#409eff
    color: #ffffff

.dialog
  .el-input
    width: 300px

.demo-table-expand 
  font-size: 0
  label
    width: 90px
  .el-form-item 
    margin-right: 0
    margin-bottom: 0
    width: 50%  

.footer
  margin-top: 20px
  float: right
</style>
